<template>
	<view>
		<image src="/static/index/bg3.png" class="bg"></image>
		<view class="return" @click="toReturn()" style="z-index: 999;background: white;">
			<u-icon name="arrow-left" size="20"></u-icon>
		</view>
		<movable-area class="map">
			<movable-view style="width: 100%;position: relative;" :scale="true" scale-value="2" x='-150' y='-150' scale-min="1" scale-max="2"
				direction="all">
				<image class="map-img" src="/static/map.png" mode="widthFix"></image>
				<view @click="toUrl('/pages/scenic/detail/detail?id='+item.id)" class="imgArr" :class="'imgArr'+item.id"
					:style="'top:'+item.top*2+'rpx;left:'+item.left*2+'rpx'" v-for="(item,index) in list1" :key="index">
					<image :src="item.map_logo" class="logo" mode="widthFix"></image>
					<image src="/static/point/icon2.png" class="icon" mode="widthFix"></image>
				</view>
				<view @click="toUrl('/pages/cultural/detail?id='+item.id)" class="imgArr" :class="'imgArr'+item.id"
					:style="'top:'+item.top*2+'rpx;left:'+item.left*2+'rpx'" v-for="(item,index) in list2">
					<image :src="item.map_logo" class="logo" mode="widthFix"></image>
					<image src="/static/point/icon3.png" class="icon" mode="widthFix"></image>
				</view>
				<view @click="toUrl('/pages/restaurant/detail/detail?id='+item.id)" class="imgArr"
					:class="'imgArr'+item.id" :style="'top:'+item.top*2+'rpx;left:'+item.left*2+'rpx'"
					v-for="(item,index) in list3">
					<image :src="item.map_logo" class="logo" mode="widthFix"></image>
					<image src="/static/point/icon7.png" class="icon" mode="widthFix"></image>
				</view>
				<view @click="toUrl('/pages/restaurant/detail/detail?id='+item.id)" class="imgArr"
					:class="'imgArr'+item.id" :style="'top:'+item.top*2+'rpx;left:'+item.left*2+'rpx'"
					v-for="(item,index) in list4">
					<image :src="item.map_logo" class="logo" mode="widthFix"></image>
					<image src="/static/point/icon7.png" class="icon" mode="widthFix"></image>
				</view>
			</movable-view>

		</movable-area>
	</view>
</template>

<script>
	import {
		scenicList,
		culturalList,
		parkadeList,
		hotelList,
		toiletList,
		wechatLogin,
		userDetail,
		config,
		gourmetList
	} from '@/api/apiData.js';
	export default {
		data() {
			return {
				scale: 2, // 初始缩放比例
				startDistance: 0, // 开始时的手指距离
				startScale: 1, // 开始时的缩放值
				list1: [],
				list2: [],
				list3: [],
				list4: [],
			};
		},
		mounted() {
			this.getData()
		},
		methods: {
			toUrl(u) {
				uni.navigateTo({
					url: u
				})
			},
			toReturn() {
				uni.navigateBack()
			},
			async getData() {
				const result1 = await scenicList({
					page: 1,
					size: 50,
					category_id: 1
				})
				const result2 = await culturalList({
					page: 1,
					size: 50,
				})
				const result3 = await gourmetList({
					page: 1,
					size: 50,
					category_id: 2
				})
				const result4 = await gourmetList({
					page: 1,
					size: 50,
					category_id: 9
				})
				this.list1 = result1.data.list
				this.list2 = result2.data.list
				this.list3 = result3.data.list
				this.list4 = result4.data.list
				this.scale = 2
			},
			
		}
	}
</script>

<style lang="scss">
	// page {
	// 	background: gainsboro;
	// }

	.map {
		width: 100%;
		height: 50vh;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;

		.map-img {
			// transform: rotate(121deg);
			width: 100%;

			// transform: rotate(90deg);
		}
	}

	.imgArr {
		position: absolute;

		.logo {
			width: 55rpx;
		}

		.icon {
			width: 30rpx;
			position: absolute;
			left: 16rpx;
			top: -6rpx;
		}
	}

	.bg {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: -1;
	}

	// .imgArr42 {
	// 	top: 258rpx;
	// 	left: 144rpx;
	// }
</style>